<template>
	<div class="sl_home_company__container">
    <div class="place-form base-padding">
      <icon type="icon-icon-f1" size="2"></icon>
      <div class="title" @click="clickHomeFn">
        <p>家</p>
        <small>{{ homeAddress ? homeAddress : '点击设置' }}</small>
      </div>
      <div class="more" @click="homeEditFn" v-show="homeAddress !== ''">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="place-to base-padding">
      <icon type="icon-hotel" size="2"></icon>
      <div class="title" @click="clickCompanyFn">
        <p>公司</p>
        <small>{{ companyAddress ? companyAddress : '点击设置' }}</small>
      </div>
      <div class="more" @click="companyEditFn" v-show="companyAddress !== ''">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sl-home-company',
    props: {
      homeAddress: {
        type: String,
        default: ''
      },
      companyAddress: {
        type: String,
        default: ''
      }
    },
    methods: {
      clickHomeFn () {
        this.$emit('clickHome')
      },
      clickCompanyFn () {
        this.$emit('clickCompany')
      },
      // 派发家庭地址事件
      homeEditFn () {
        this.$emit('homeEdit')
      },
      // 派发公司地址事件
      companyEditFn () {
        this.$emit('companyEdit')
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  
  .sl_home_company__container
    background #fff
    display: flex
    padding 1 * .61rem 0
    >div
      position relative
      width 50%
      display flex
      align-content center
      .icon
        color: $sl_font_color_desc_s
      .title
        display inline-block
        padding-left 1 * .61rem
        font-size $sl_font_color_default
        p
          font-size $sl_font_size_14
          padding-bottom .8 * .61rem
        small
          color $sl_font_color_desc_s
          font-size $sl_font_size_small
          overflow hidden
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
          width 9 * .61rem
          display block
      .more
        background #f1f1f1
        position absolute
        right 1 * .61rem
        top 50%
        padding .5 * .61rem
        border-radius 8px
        overflow hidden
        transform translateY(-50%)
        display flex
        flex-direction column
        align-items center
        flex-wrap wrap
        >div
          width 2px
          height 2px
          border-radius 50%
          background #999
          margin 2px 0
    .place-form
      border-right 1px #ddd solid
</style>
